<template>
    <div class="editor-view-container">
        <TinymceEditor ref="editor" style="height: 75vh;border-radius: 5px;margin-bottom: 30px;"></TinymceEditor>
        <div style="display: flex;justify-content: space-around;">
            <el-button type="warning" @click="handleBack">退出编辑</el-button>
            <el-button type="primary" @click="handlePublish">发布文章</el-button>
        </div>
        
    </div>
</template>

<script>
import TinymceEditor from '../components/EditorTool.vue'
import {addArticle} from '@/api/article'
export default{
    components:{TinymceEditor},
    data(){
        return {
            article:{
                title:'',
                content:''
            }
        }
    },
    methods:{
        handleBack(){
            this.$router.push('/')
        },
        handlePublish(){
            const editor = this.$refs.editor
            this.article.title = editor.getTitle()
            this.article.content = editor.getContent()

            console.log(this.article)

            if (this.article.title == ''|| this.article.title == null){
                this.$message.warning("标题为空")
                return
            }

            if (this.article.content == ''|| this.article.content == null){
                this.$message.warning("内容为空")
                return
            }

            addArticle(this.article).then(res => {
                if (res.code == 1){
                    this.$message.success("发布成功")
                }
                else{
                    this.$message.warning("发布失败")
                }
            })
        }
    }
    
}
</script>

<style scoped>

</style>